跳到主要内容

CSS 关键帧

阐述​

@keyframes <name> {
   <progress> { <declarations> }
   ...
}

关键帧定义了多个时刻上应用的不同状态，可以用于创建 CSS 动画。<progress> 可以是 from, to，也可以是百分比。

关键帧与普通的 CSS 声明具有不同的优先级，详见 CSS 层叠。

实例​

分为 4 步的旋转​

@keyframes multi-step-spin {
	0% {
	  transform: rotate(0turn);
	}
	25% {
	  transform: rotate(0.25turn);
	}
	50% {
	  transform: rotate(0.5turn);
	}
	75% {
	  transform: rotate(0.75turn);
	}
	100% {
	  transform: rotate(1turn);
	}
}

性质​

相关内容​

关键帧和 CSS 过渡的优缺点​

关键帧适合于做有重复的、多步的或者可暂停的动画，而过渡适合做某种一次性的、由于应用状态改变或用户动作导致的动画。

参考文献​